<template>
  <div class="addrList">
    <!-- 导航栏 -->
    <header>
      <van-nav-bar title="地址管理" color="black" right-arrow @click-left="goBack">
        <van-icon name="arrow-left" slot="left" />
      </van-nav-bar>
    </header>

    <div>
      <van-loading v-if="istrue" type="spinner" class="center" size="40px" />
      <div v-else>
        <div class="addressList" v-for="(item,index) in list" :key="index">
          <div class="addressBox" @click="select(index)">
            <div class="addressForm">
              <span class="name">{{item.name}}</span>
              <span class="phone">{{item.tel}}</span>
            </div>
            <div class="address">{{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}</div>
          </div>
          <!-- 选择默认地址与地址编辑 -->
          <div class="addressEdit">
            <div class="left">
              <!-- <input type="radio" name="1" :checked="item.isDefault" /> -->
              <!-- <van-checkbox v-model="item.isDefault"></van-checkbox> -->
              <van-radio-group v-model="radio" >
                <van-radio :name="index" checked-color="#07c160" @click="select(index)"></van-radio>
              </van-radio-group>
              {{ ' &nbsp;默认地址'}}
            </div>

            <div class="right">
              <router-link :to="`/address/edit/${item.addressId}`" tag="div" class="editF">
                <i class="iconF_2 iconfont icon-bianxie"></i>
                <span class="editW">编辑</span>
              </router-link>
              <!-- <div ></div> -->
              <div class="delF">
                <i class="iconF_3 iconfont icon-Shapecopy"></i>
                <span class="delW" @click="del(item.addressId)">删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 地址列表 -->

    <!-- 新建地址 -->
    <footer>
      <div class="newBuild" @click="bulid">
        <i class="iconF_4 iconfont icon-jia"></i>
        <span class="bulidF">新建地址</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 0,
      list: [],
      id: "",
      istrue: true
    };
  },
  methods: {
    select(value) {
      this.radio = value;
      this.list[value].isDefault = true;
      this.esitaddress(value);
    },

    esitaddress(value) {
      let url = "/address/edit";
      let data = this.list[value];
      this.$axios
        .post(url, data)
        .then(res => {
          this.$toast("选择地址成功");
          setTimeout(() => {
            this.order(this.list[value]);
          }, 1100);
        })
        .catch(err => {
          console.log("err", err);
        });
    },

    // 返回
    goBack() {
      this.$router.push(`/order/submit/${this.id}/${1}`);
    },
    // 进入订单详情
    order(item) {
      this.$store.commit("updateaddressname", item.name);
      this.$store.commit("updateaddresstel", item.tel);
      this.$store.commit(
        "updateaddress",
        item.province + item.city + item.addressDetail
      );
      this.goBack()
    },
    // 编辑
    edit() {
      this.$router.push("/address/edit");
    },
    // 删除
    del(id) {
      let url = "/address/del";
      let data = {
        addressId: id
      };

      this.$axios
        .post(url, data)
        .then(res => {
          this.getList();
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    // 新建地址
    bulid() {
      this.$router.push("/address/newEdit");
    },
    getList() {
      let url = "/address/all";
      this.$axios
        .get(url)
        .then(res => {
          this.list = res.list;
          res.list.forEach((item, index) => {
            if (item.isDefault) {
              this.radio = index;
            }
          });
          this.istrue = false;
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getList();
  }
};
</script>

<style lang='less' scoped>
.center {
  height: 80vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  top: 30%;
}
.addrList {
  width: 100vw;
  height: 100vh;
  background: #f4f4f4;
  // 导航栏
  header {
    .van-nav-bar__title {
      font-weight: 600;
    }
    .van-nav-bar .van-icon {
      color: black;
      font-size: 20px;
    }
  }
  .advance {
    margin-top: 10px;
  }
  .addressList {
    width: 100%;
    height: 115px;
    background-color: #fff;
    .addressBox {
      margin-top: 10px;
      padding: 13px 20px;
      border-bottom: 1px solid #eae8e8;
      .addressForm {
        line-height: 24px;
        .name {
          font-size: 16px;
          font-weight: 600;
        }
        .phone {
          font-size: 16px;
          margin-left: 2%;
          font-weight: 600;
        }
      }
      .address {
        font-size: 14px;
        color: #797d82;
        width: 77%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    // 默认地址

    .addressEdit {
      width: 100%;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        line-height: 20px;
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-left: 10px;
      }
      .right {
        display: flex;
        line-height: 39px;
        font-size: 15px;
        .editF {
          .iconF_2 {
            font-size: 17px;
          }
          .editW {
            margin-left: 3px;
          }
        }
        .delF {
          margin: 0 15px;
          .iconF_3 {
            font-size: 15px;
          }
          .delW {
            margin-left: 3px;
          }
        }
      }
    }
  }
  // 新建地址
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 55px;
    background-color: #fff;
    .newBuild {
      text-align: center;
      line-height: 55px;
      font-size: 20px;
      color: #c74553;
      .bulidF {
        margin-left: 8px;
      }
    }
  }
}
</style>